<script setup lang="ts" name="ResourceSelectDialog">
const router = useRouter()

const emit = defineEmits(['save', 'close'])

const ResourceLibraryRef: any = ref(null)

const initInfo = ref({
  dialogVisible: false
})

// 显示弹窗
const showDialog = (v) => {
  initInfo.value.dialogVisible = true
  nextTick(() => {
    ResourceLibraryRef.value.getChooseConfig(v)
  })
}

// 子组件将方法暴露给父组件
defineExpose({ showDialog })

// 关闭弹窗
const closeDialog = () => {
  initInfo.value.dialogVisible = false
  emit('close')
}

// 保存
const handleOk = () => {
  ResourceLibraryRef.value.getActiveResource()
}

// 监听资源选择，并将选择资源传递给父组件，以及关闭弹窗
const getActiveResource = (res) => {
  console.log(res, '已选择资源')
  if (res.length === 0) {
    closeDialog()
  } else {
    emit('save', res)
    closeDialog()
  }
}

const routerToResourceLibrary = () => {
  router.push('/Resource')
}
</script>

<template>
  <el-dialog v-model="initInfo.dialogVisible" title="选择资源" width="80%" align-center :append-to-body="true" @close="closeDialog">
    <div class="resource-wrap">
      <ResourceLibrary ref="ResourceLibraryRef" :show="initInfo.dialogVisible" @select="getActiveResource" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button class="link" type="primary" link @click="routerToResourceLibrary">进入资源库管理</el-button>
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="handleOk">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.resource-wrap {
  position: relative;
  display: flex;
  height: 70vh;
  margin: calc(0px - var(--el-space));
  overflow: hidden;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  overflow: hidden;

  .link {
    margin-right: auto;
  }
}
</style>
